<template>
	<view class="page">
		<xk-header title="预约成功"></xk-header>
		<view class="top-view">
			<u-icon class="icon" name="checkmark-circle-fill" size="90" color="#CC9A65"></u-icon>
			<text class="title">预约成功</text>
			<text class="inline">您可以在“首页->我的预约”中查询预约情况</text>
		</view>
		<view class="btn">
			<u-button @click="goPage('myAppointment')" :customStyle="{backgroundColor: '#CC9A65',color: '#fff'}">查看预约</u-button>
		</view>
		<view class="btn">
			<u-button @click="switchTo('/pages/home/index/index')" plain>返回首页</u-button>
		</view>
	</view>
</template>
<script>
export default {
  methods: {
    goPage(url) {
      uni.navigateTo({
        url,
        fail(e) {
          console.log(e);
        }
      });
    },
    switchTo(url) {
      uni.switchTab({
        url,
        fail(e) {
          console.log(e);
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
	.page{
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.top-view{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 450rpx;
		background-color: white;
		.title{
			font-weight: bold;
			font-size: 36rpx;
			margin-top: 20rpx;
		}
		.inline{
			margin-top: 5rpx;
			color: grey;
		}
	}
	.btn{
		width: 85%;	
		height: 100rpx;
		border-radius: 20rpx;
		margin-top: 30rpx;
	}
</style>
